<script lang="js">
import { ref,reactive } from 'vue'
import axios from 'axios';


export default {
  data() {
    return {
      formInline: reactive({
        itemName: '',
        itemCategroy: '',
        itemUse: '',
        itemPosition: '',
        itemOvertime: ''


      }),
      tableData: reactive([]),
      currentPage: 1,
      pageSize: 5,
      currentPageData: reactive([]),
      totalnum: 0,
      bianjibool: reactive({
        isbianji: true
      })
    };
  },
  methods: {
    async onSubmit() {
      console.log('query!');
      let reqjson = JSON.stringify(this.formInline);
      try {
        const response = await axios.post('http://192.168.31.232:8899/queryitemsbypost', reqjson, {
          headers: {
            'Content-Type': 'application/json'
          }
        });
        alert('表单提交成功！');
        console.log(response);
        this.tableData = response.data.data;
        this.totalnum = this.tableData.length;
        console.log(this.totalnum);
        this.getCurrentPageData();
        console.log(this.currentPageData);
      } catch (error) {
        console.error(error);
        alert('网络错误，请稍后再试！');
      }
    },
    getCurrentPageData() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = this.currentPage * this.pageSize;
      this.currentPageData = this.tableData.slice(start, end);
      console.log(this.currentPageData);
    },
    handleSizeChange (val) {
      console.log(val)
      this.pageSize = val;
      this.getCurrentPageData();
    },
    handleCurrentChange (val) {
      console.log(val)
      this.currentPage = val;
      this.getCurrentPageData();
    },
    bianji () {
      this.bianjibool.isbianji = !this.bianjibool.isbianji
    },
    async updaterow  (row) {
      console.log("update")
      let reqjson = JSON.stringify(row)
      console.log(reqjson)
      try {
        const response = await axios.post('http://192.168.31.232:8899/updateItemsbyId', reqjson,{
          headers: {
            'Content-Type': 'application/json'
          }
        });
        if (response.data.success) {
          alert('表单提交成功！');
        } else {
          alert('表单提交失败：' + response.data.message + '收到返回标志' + response.data.success);
        }
      } catch (error) {
        console.error(error);
        alert('网络错误，请稍后再试！');
      }
    },

    async deleterow  (row)  {
      console.log("delete")
      // console.log(row)
      console.log(row.itemId)
      // console.log(tableData)
      // console.log(tableData.value)
      // console.log(tableData.value.filter(item => item.ItemsId !== row.ItemsId  ))
      try {
        // 发送 DELETE 请求到后台 API
        // const response = await axios.delete(`/api/delete-item/${row.itemId}`);
        const response = await axios.get(`http://192.168.31.232:8899/deleteItemsbyId/${row.itemId}`);
        // 根据响应处理删除操作
        console.log(response.data.code)
        if (response.data.code === "000000") {
          // 从本地数据中移除这一行

          this.tableData = this.tableData.filter(item => item.itemId !== row.itemId);
          this.totalnum = this.tableData.length;
          this.getCurrentPageData()

          console.log(response.data.code)
          alert('删除成功！');
          // this.$message({
          //   message: '删除成功',
          //   type: 'success'
          // });
        } else {
          // this.$message.error('删除失败：' + response.data.message);
          alert('删除失败：' + response.data.message + '收到返回标志' + response.data.success);

        }
      } catch (error) {
        // 处理请求错误
        // this.$message.error('删除失败：' + error.message);
        alert('删除失败！' + error.message );

      }
    }
  },
  created() {
    this.getCurrentPageData(); // 假设你希望在组件创建时加载第一页数据
  }
};



</script>

<template>
  <div >
  <h1>This is an queryItem page</h1>

  <el-form :inline="true"  :model="formInline" class="demo-form-inline">
    <el-form-item label="ItemName">
      <el-input v-model="formInline.itemName" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="ItemCategroy">
      <el-input v-model="formInline.itemCategroy" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="ItemUse">
      <el-input v-model="formInline.itemUse" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="ItemPosition">
      <el-input v-model="formInline.itemPosition" placeholder="Approved by" clearable />
    </el-form-item>

    <el-form-item label="过期时间">
<!--      <el-col :span="11">-->
        <el-date-picker
            v-model="formInline.itemOvertime"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
        />
<!--      </el-col>-->
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
  </el-form>
<!--   <el-scrollbar style="height:1800px">-->

  <el-table :data="currentPageData" style="width: 100%">

    <el-table-column label="物品id" width="100" >
      <template v-slot="scope">
        <el-input v-model="scope.row.itemId" :disabled="bianjibool.isbianji"/>
      </template>
    </el-table-column>
    <el-table-column label="物品名称" width="180" >
      <template v-slot="scope">
        <el-input v-model="scope.row.itemName" :disabled="bianjibool.isbianji"/>
      </template>
    </el-table-column>
    <el-table-column  label = "图片"  width="180">
      <template v-slot="scope">
        <div v-if="Array.isArray(scope.row.itemUrllist) && scope.row.itemUrllist.length > 0">
          <el-image
              style="width: 100%; height: 100px; object-fit: cover"
              :src="scope.row.itemUrllist[0]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="scope.row.itemUrllist"
              :initial-index="0"
              fit="contain"
              preview-teleported
          />
        </div>
        <div v-else>
          <!-- 如果没有图片，可以显示占位符或提示信息 -->
          No Image Available
        </div>
      </template>
    </el-table-column>
    <el-table-column label="物品数量" width="100" >
      <template v-slot="scope">
        <el-input v-model="scope.row.itemAmount" :disabled="bianjibool.isbianji"/>
      </template>
    </el-table-column>
    <el-table-column prop="item_overtime" label="过期时间" width="150" >
      <template v-slot="scope">
        <el-date-picker
            v-model="scope.row.itemOvertime"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
            :disabled="bianjibool.isbianji"
        />
      </template>
    </el-table-column>>
    <el-table-column label="物品分类" width="100" >
      <template v-slot="scope">
        <el-input v-model="scope.row.itemCategroy" type="textarea" :disabled="bianjibool.isbianji"/>
      </template>
    </el-table-column>
    <el-table-column label="物品用法" width="100" >
      <template v-slot="scope">
        <el-input v-model="scope.row.itemUse" type="textarea"  :disabled="bianjibool.isbianji"/>
      </template>
    </el-table-column>    
    <el-table-column label="物品位置" width="100" >
      <template v-slot="scope">
        <el-input v-model="scope.row.itemPosition" type="textarea"  :disabled="bianjibool.isbianji"/>
      </template>
    </el-table-column>     
    <el-table-column  label = "图片"  width="180">
      <template v-slot="scope">
        <div v-if="Array.isArray(scope.row.positionUrllist) && scope.row.positionUrllist.length > 0">
          <el-image
              style="width: 100%; height: 100px; object-fit: cover"
              :src="scope.row.positionUrllist[0]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="scope.row.positionUrllist"
              :initial-index="0"
              fit="contain"
              preview-teleported
          />
        </div>
        <div v-else>
          <!-- 如果没有图片，可以显示占位符或提示信息 -->
          No Image Available
        </div>
      </template>
    </el-table-column>
    <el-table-column label="备注" width="100" >
      <template v-slot="scope">
        <el-input v-model="scope.row.remark" type="textarea" :disabled="bianjibool.isbianji" />
      </template>
    </el-table-column> 
    <el-table-column label="操作" width="300" >
      <template v-slot="scope">
        <el-button @click="bianji"> 编辑 </el-button>
        <el-button @click="updaterow(scope.row)"> 更新 </el-button>
        <el-button @click="deleterow(scope.row)"> 删除 </el-button>
      </template>
    </el-table-column>

  </el-table>
     <!-- 分页组件 -->
     <el-pagination background @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage" :page-sizes="[5, 10, 15, 40]" :page-size="pageSize" layout="sizes, prev, pager, next" :total="totalnum" />
<!--     :page-sizes="[2, 10, 30, 40]" :page-size="pageSize"    -->
<!--       -->





<!--    <el-pagination  background layout="prev, pager, next" :total="1000" />-->

<!--   </el-scrollbar>-->

  </div>
</template>

<style>

</style>
